In JSX, we can return only one html element from return, can't return multiple elements, if you want to return multiple elements then wrap all the html code in a div or by any other wrapper component.

Same thing is happening in your 1st case, you are returning 2 elements, one div and one table. when you are wrapping them in one div everything is working properly.

Same rule you have to follow for conditional rendering of components.

Example:

Correct:

{ 1==1 /* some condition */ ? 
    <div>
        True
    </div> 
: 
    <div>
        False
    </div>
}

Wrong:

{ 1==1 /* some condition */ ? 
    <div>
        True 1
    </div>
    <div>
        True 2
    </div> 
: 
    <div>
        False 1
    </div>
    <div>
        False 2
    </div>
}

Just a quick update. If you are using React v16.2.0 and above you also can use Fragments.

  return (
    <>
        <div>
            True 1
        </div>
        <div>
            True 2
        </div> 
    </>
  );

I also replied to a similar question, more in depth here

This error occurs when the comma is interpreted as “comma operator” and not comma within arrays, objects, etc.

Comma operator evaluates each expression separated by comma and returns the last value.

const foo = (1, 2, 3) // returns 3

In this example, 3 will be assigned to foo. But it is highly likely that author thought (1, 2, 3) will be assigned like python tuple. So this error exists.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

So if you encountered this error, chances are there are some mistakes in your array/object/etc and it is interpreted as "comma operator".

Example code which causes this error.

const foo = (expr) => {
  const bar = ""
  const baz = ""

  switch (expr) {
    case 'Oranges', 'Mangoes': // error, you can't use comma for switch
      break;
    case 'Papayas':
      break;
  }


  { bar, baz } // You forgot to write return. Javascript thinks this is comma operator.
}